<template>
	<view class="content">
        <image src="../../static/image/wj_bg.png" class="wj-bg"></image>
        <u-navbar :is-back="false" back-icon-color="#000" title="问卷调查" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <u-icon size="40" color="#000" name="arrow-left" class="arrow-left" @click="back"></u-icon>
            <view slot="right" style="padding-right: 20rpx;font-size: 30rpx;" @click="$gTo('/mine/pages/question/question-record')">
                答题记录
            </view>
        </u-navbar>
        
        <view class="top">
            <view class="top-tit">{{hour}}:{{minute}}:{{seconds}}</view>
            <view class="u-flex">
                <view class="top-line">
                    <view class="u-p-r-10">答题进度 {{ques.num}}/{{ques.count}}</view>
                    <view class="line">
                        <u-line-progress active-color="#ffba00" inactive-color="#fff" :percent="percent" :show-percent="false" height="12"></u-line-progress>
                    </view>
                </view>
                <view></view>
            </view>
        </view>
        
        <view class="box" v-if="ques.status != 3">
            <view class="title">选择题</view>
            <view class="ques" v-if="ques && ques.question">题目内容：{{ ques.question.question }}</view>
            <!-- miss : index == 3 -->
			<template v-if="ques && ques.question && ques.question.options" >
				<view class="option" :class="{active : item.isSelect}"
					v-for="(item, index) in ques.question.options" :key="index" @click="choose(item)">
				    <view :class="{activeW : item.isSelect}">{{item.letter}}.{{item.options}}</view>
				    <image src="../../static/icon/mine_01.png" class="mine-01" v-if="item.isSelect"></image>
				</view>
			</template>
            <view class="btn" @click="$u.throttle(next, 500)">下一题</view>
        </view>
        
        <!-- 答题结果弹窗 -->
        <u-mask :show="show" mode="center" border-radius="20">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-up">
                        <view class="pop-score">
                            <text class="pop-score-num">{{score}}</text>分
                        </view>
                        <view>感谢您的参与，请等待工作人员联系!</view>
                        <view class="pop-btn" @click="back">知道了</view>
                    </view>
                    <image src="/static/icon/wx.png" class="pop-del" @click="show = false"></image>
                </view>
            </view>
        </u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,//连点
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                show: false,
                data: {},
                ques: {},
                latitude: '',
                longitude: '',
                score: '',
                timer: null,
                hour: '00',
                minute: '00',
                seconds: '00',
                count: 0,
                percent: 0,//进度条
			}
		},
		onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            this.longitude = option.longitude
            this.latitude = option.latitude
            if (option.data) {
                this.data = JSON.parse(option.data)
                console.log(this.data)
                this.getData()
            }
            this.getTime()
            
		},
        onHide() {
            clearTimeout(this.timer);
            this.timer = null
        },
        onUnload() {
            clearTimeout(this.timer);
            // clearInterval(this.timer);
            this.timer = null
        },
		methods: {
			back() {
				// this.show = false
				this.$backT()
			},
			
            getTime() {
                this.count++;
                // 需要改变页面上时分秒的值
                this.seconds = this.showNum(this.count % 60);
                this.minute = this.showNum(parseInt(this.count / 60) % 60);
                this.hour = this.showNum(parseInt(this.count / 60 / 60));
                this.timer = setTimeout(() => {
                    this.getTime();
                }, 1000);
            },
            
            showNum(num) {
                if (num < 10) {
                    return '0' + num;
                }
                return num;
            },
            // 返回
            back() {
                uni.showModal({
                	title: '温馨提示',
                	content: '答题结束，保留当前分数，是否确认离开？',
                	success: (res) => {
                		if (res.confirm) {
                            clearTimeout(this.timer);
                            this.timer = null
                			this.$backT()
                		} else if (res.cancel) {
                			
                		}
                	}
                });
            },
            choose(item) {
                item.isSelect = !item.isSelect
            },
            // 下一题
            next() {
                var ids = []
                this.ques.question.options.forEach(cur => {
                    if (cur.isSelect) {
                        ids.push(cur.id)
                    }
                })
                if (ids.length == 0) {
                    this.$toast('请选择答案');
                    return
                }
                this.$ajax('sign_in_answer', {
                	user_token: this.$getSync('userToken'),
                    id: this.data.id,//签到id
                    activity_id: this.data.activity_id,//活动试卷id
                    question_id: this.ques.question.id,//问题id 开始答题没有不用传	
                    answer: ids.join(','),//答案id,分割字符串
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.ques = ret.detail
                        // status 2答题中 3已答完
                        if (this.ques.status == 3) {
                            this.score = this.ques.score
                            clearTimeout(this.timer);
                            this.timer = null
                            this.show = true
                        } else {
                            if (ret.detail && ret.detail.question && ret.detail.question.options && ret.detail.question.options.length > 0) {
                                ret.detail.question.options.forEach(cur => {
                                    this.$set(cur, 'isSelect', false)
                                })
                            }
                            this.percent = (this.ques.num / this.ques.count) * 100
                        }
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
			getData() {
				this.$ajax('sign_in_answer', {
					user_token: this.$getSync('userToken'),
			        longitude: this.longitude,//经度 开始答题传
			        latitude: this.latitude,//纬度 开始答题传
                    id: this.data.id,//签到id
                    activity_id: this.data.activity_id,//活动试卷id
                    question_id: '',//问题id 开始答题没有不用传	
                    answer: '',//答案id,分割字符串
				}).then(ret => {
					if (ret.success == 1000) {
						this.ques = ret.detail
                        if (ret.detail && ret.detail.question && ret.detail.question.options && ret.detail.question.options.length > 0) {
                            ret.detail.question.options.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                        this.percent = (this.ques.num / this.ques.count) * 100
					} else {
						this.$toast(ret.msg);
					}
				});
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
		}
	}
</script>

<style lang="scss">
    .arrow-left {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20rpx;
        z-index: 25;
        color: black;
    }
	page {
		background: #edf3fd;
	}
    .content{
        padding: 0 25rpx;
    }
    .wj-bg{
        width: 750rpx;
        height: 403rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .top{
        padding-bottom: 50rpx;
    }
    .top-tit{
        font-size: 52rpx;
        font-weight: bold;
        color: #12264d;
        padding-left: 15rpx;
        padding-bottom: 15rpx;
    }
    .top-line{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15rpx 20rpx;
        background-color: #296bef;
        border-radius: 15rpx;
        color: #fff;
        font-size: 24rpx;
    }
    .line{
        width: 185rpx;
    }
    
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 35rpx 30rpx;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .ques{
        font-size: 24rpx;
        font-weight: bold;
        padding: 20rpx 0 30rpx;
    }
    .option{
        font-size: 24rpx;
        padding: 25rpx 55rpx;
        border-radius: 50rpx;
        margin-bottom: 20rpx;
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .active{
        background-color: #d8ffeb;
        color: #208953;
    }
    .activeW{
        width: 485rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .miss{
        background-color: #ffefee;
        color: #fe6155;
    }
    .mine-01{
        width: 37rpx;
        height: 30rpx;
    }
    .btn{
        font-size: 34rpx;
        text-align: center;
        color: #fff;
        padding: 25rpx;
        border-radius: 50rpx;
        background-color: #296bef;
        margin-top: 40rpx;
    }

    
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 10rpx;
    }
    .pop-up{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 55rpx;
    }
    .pop-score{
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        color: #fe6155;
        font-size: 22rpx;
        margin-bottom: 35rpx;
        margin-top: -50rpx;
        background-color: #fff;
        border: 14rpx solid #dce3eb;
        text-align: center;
        line-height: 160rpx;
    }
    .pop-score-num{
        font-size: 70rpx;
        font-weight: bold;
    }
    .pop-btn{
        font-size: 32rpx;
        color: #fff;
        padding: 18rpx 140rpx;
        border-radius: 50rpx;
        background-color: #00a1e9;
        margin-top: 50rpx
    }
    .pop-del {
        width: 7vw;
        height: 7vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }

</style>

